
.content_product
    display: none
.content_active
    display: block
.faded
    opacity: 0
    transition: all .15s
.faded.in
    opacity: 1
    transition: all .15s
.header__product
    position: relative
    // height: 400px
    p
        margin: 0
    .headerData
        position: absolute
        left: 64px
        top: 32px
        display: flex
        flex-direction: column
        h1
            align-self: flex-start
            background-color: $back_color
            padding: 24px 24px 24px 34px
            border-radius: 5px
            gap: 24
            font-weight: 400
            font-size: 1.5em
        
        .headerData__price
            display: flex
            justify-content: flex-start
            gap: 24px
            margin-bottom: 24px
            flex-wrap: wrap
            .headerDate__block
                position: relative
                gap: 12px 
                display: flex
                flex-direction: column
                justify-content: space-between
                .days
                    position: absolute
                    right: -20px
                    top: -10px
                    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)
                    font-size: 0.6em
                    padding: 6px
                    color: $active_color
                p
                    padding:12px 24px
                    background-color: $back_color
                    border-radius: 5px
                   
                    // align-items: center
                    
button.open_form
    background-color: $active_color
    border-radius: 5px
    padding: 12px 28px
    border: 0 
    color: $hover_color
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)
    transition: all 0.3s cubic-bezier(.25,.8,.25,1)
button.open_form:hover
    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22)
    cursor: pointer
    color: $hover_color

.plan
    // margin-top: 64px
    margin-bottom: 64px
    .plan_table
        display: flex
        flex-wrap: wrap
        gap: 24px
        margin-bottom: 64px

    .plan__collected
        // margin-bottom: 64px
        border-left: 1px solid $text_color
        padding-left: 24px

        tr
            td
                padding: 8px 0px 0px 32px

    .plan__description
        p
            columns: 2
.tab
    display: flex
    margin: 64px 64px 0px 64px
    
    li
        padding: 8px 42px 8px 42px
        background-color: $active_color
        box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)
        transition: all 0.3s cubic-bezier(.25,.8,.25,1)
        border: 0
        border-radius: 5px
        margin-right: 12px
    li:hover
        box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22)
        cursor: pointer
        color: $hover_color
        a
            color: $back_color
    .active
        box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22)
        cursor: pointer
        color: $hover_color
@media (max-width: 960px)
    .plan
        .plan__description
            p
                columns: 1
    .conteiner
        .tab
            margin:32px 16px 0px 16px 
